import React, {useState, useEffect} from 'react';
import ReactDOM from 'react-dom';
import {usePersistFn} from 'ahooks';
import {Modal, Form} from 'antd';
import {querySelectOptions} from '~/service/refundReport';
import SearchForm from '../../../../common/CommonSearchBar';
import {searchFormCfg, selectUnitId} from './modalConfig';

const initValues = {};
const formItemLayout = {
    labelCol: {offset: 1, span: 7},
    wrapperCol: {span: 13}
};

/** 添加对比对话框 */
const ModalSearchForm = props => {
    const {isVisiable, onOk, onCancel} = props;
    const [selectOptions, setSelectOptions] = useState([]);
    const [form] = Form.useForm();

    // 请求单个表单配置项
    const handleFetchOptions = usePersistFn(
        ({
            key,
            searchKey,
            pager,
            dependItemKey,
            dependItemValue,
            isGetingMore,
            options: curOptions,
            fieldsValue
        }) => {
            const permissions = searchFormCfg
            ?.map(item => {
                if (item.key === 'begin_date') {
                    const filterItems = fieldsValue[item.key]
                        ? [fieldsValue[item.key]?.format('YYYYMMDD'), fieldsValue[item.key]?.format('YYYYMMDD')]
                        : [];
                    return {
                        dimensionId: `${selectUnitId}_${item.key}`,
                        dimensionName: item.key,
                        filterItems
                    };
                }
                return {
                    dimensionId: `${selectUnitId}_${item.key}`,
                    dimensionName: item.key,
                    filterItems: Array.isArray(fieldsValue[item.key])
                        ? fieldsValue[item.key]
                        : fieldsValue[item.key] == null
                            ? []
                            : [fieldsValue[item.key]]
                };
            })
            ?.filter(item => item.filterItems?.length);

            const params = {
                pager,
                dimensionId: `${selectUnitId}_${key}`,
                dimensionName: key,
                searchKey,
                permissions,
                unitId: selectUnitId
            };

            querySelectOptions(params).then(res => {
                const {data, pager} = res;
                let options =
                    data.map(item => ({
                        key: item,
                        value: item,
                        label: item
                    })) || [];
                // 分页时，累加展示
                if (isGetingMore) {
                    options = curOptions.concat(options);
                }
                setSelectOptions({
                    key,
                    options,
                    pager
                });
            });
        }
    );

    const handleOk = () => {
        form.validateFields().then(
            values => typeof onOk === 'function' && onOk(values)
        );
    };
    // 点击取消时重置表单
    const handleCancel = () => {
        form.resetFields();
        typeof onCancel === 'function' && onCancel();
    };

    return (
        <Modal
            title="添加对比"
            visible={isVisiable}
            centered
            onOk={handleOk}
            onCancel={handleCancel}
        >
            <SearchForm
                noCache
                formItemLayout={formItemLayout}
                form={form}
                config={searchFormCfg}
                selectOptions={selectOptions}
                initialValues={initValues}
                onfetchOptions={handleFetchOptions}
            />
        </Modal>
    );
};

const AddComparisonView = props => ReactDOM.createPortal(<ModalSearchForm {...props} />, document.body);

export default AddComparisonView;
